Передать multipart/form-data через ajax

[rafaello]

Здравствуйте! Прошу оказать помощь в решении вопроса.
Имеется форма смешанного содержимого
<form name='adminForm' id='adminForm' class='' enctype='multipart/form-data' method='post' action='add.php'>
<input type="text" class="input-icon input-icon_email required" name="f_Email" placeholder="Email или Телефон">
<textarea class="input-icon input-icon_text required" name="f_Text" placeholder="Текст вашего сообщения "></textarea>
<input type="file" name="f_file" class="js-styler" data-placeholder="Прикрепите файл (размер до 10 мб)." data-browse="Выберите файл">
<button type="submit" id="checkvild" class="btn form-btn"><span>Отправить</span></button>
</form>
При обычной отправке на адрес add.php все работает, то есть обработчик принимает пост запрос, обрабатывает и сохраняет в базу все данные и картинки.
В связи с изменением дизайна необходимо сделать без перезагрузки, через ajax, post
Пробовал вот так

$('#adminForm').each(function() {
$form.validate({
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "/netcat/add.php",
contentType: 'multipart/form-data',
data: $(form).serialize(),
processData: false,
contentType: false
}).done(function() {
form.reset();
$form.next('.js-form-success').show();
}); } }); });
и так

$('#adminForm').each(function() {
$form.validate({
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "/netcat/add.php",
contentType: 'multipart/form-data',
data: new FormData($(form)),
processData: false,
contentType: false
}).done(function() {
form.reset();
$form.next('.js-form-success').show();
}); } }); });
не получается в обоих случаях.
$form.next('.js-form-success').show(); выполняется, но POST запрос в базу данных не сохраняется.

[laimas]

$('#adminForm').each(function() {

А это зачем?

[rafaello]

Это так написал тот человек, который делал новый дизайн.
$('#adminForm').each(function() {
$form.validate({
//....
//.... здесь идет код проверки валидации формы на заполненность полей
//....
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "/netcat/add.php",
contentType: 'multipart/form-data',
data: $(form).serialize(),
processData: false,
contentType: false
}).done(function() {
form.reset();
$form.next('.js-form-success').show();
}); } }); });

[rafaello]

то есть он писал код для обычной формы, без полей типа файл. И обычная форма работает. А при добавлении поля типа файл - не работает.

[rafaello]

то есть надо как бы заодно и проверить валидность заполнения полей и отправить пост запрос с полями, среди которых есть тип файл.

[laimas]

$('#adminForm').each(function() {

Это для одной формы с уникальным ID полнейшая глупость. Обрабатывать нужно событие onsubmit, в котором отменять действие по умолчанию, а данные отправляемые формой, это будет new FormData(this). Ни кто не будет сериализовать бинарные данные.

то есть обработчик принимает пост запрос, обрабатывает и сохраняет в базу все данные и картинки.

И изображения в базу?

[rafaello]

получается у меня есть два типа форм, одни без типа файл, другие с типом файл. Для одних один id для други другой id.
Если я правильно понял, надо прописать действие onsubmit , верно?
.... а на ваш вопрос по поводу картинок - обработчик, если напрямую отправлять, без jquery, то он выдает ссылку на сохраненный файл

[Nexus]

Это для одной формы с уникальным ID полнейшая глупость.
Иногда подобное бывает очень удобным, не нужно сохранять ссылку на элемент, чтобы с ним взаимодействовать.

rafaello, так пробовали?
$('#adminForm').each(function() {
$form.validate({
submitHandler: function(form) {
$.ajax({
type: "POST",
url: "/netcat/add.php",
data: new FormData(form),
processData: false,
contentType: false
}).done(function() {
form.reset();
$form.next('.js-form-success').show();
});
}
});
});

[laimas]

contentType: 'multipart/form-data'

processData: false,
contentType: false

Иначе тип не не будет соответствующим.

[laimas]

получается у меня есть два типа форм, одни без типа файл, другие с типом файл. Для одних один id для други другой id.

Ну допустим, а зачем?

[laimas]

Если я правильно понял, надо прописать действие onsubmit , верно?

А что еще, если у вас проверяется форма, если validate имеет submitHandler? Но почему не просто $('form').validate?

[Nexus]

laimas, спасибо, поправил.